<template>
    <div>
        <el-form ref="form" :model="form" label-width="130px" size="small" inline label-suffix="：" :rules="rules">
            <div class="box-title">{{title}}</div>
            <el-form-item label="车牌号" prop="carNo">
                <el-input v-model="form.carNo" placeholder="请输入车牌号" clearable style="width: 150px"></el-input>
            </el-form-item>
            <el-form-item label="空车皮重（吨）" prop="tare">
                <el-input v-model="form.tare" placeholder="请输入空车皮重" clearable style="width: 150px"></el-input>
            </el-form-item>
            <el-form-item label="载重吨" prop="loadTon">
                <el-input v-model="form.loadTon" placeholder="请输入载重吨" clearable style="width: 150px"></el-input>
            </el-form-item>
            <el-form-item label="车主" prop="owner">
                <el-input v-model="form.owner" placeholder="请输入车主" clearable style="width: 150px"></el-input>
            </el-form-item>
            <el-form-item label="车主联系方式" prop="ownerTel">
                <el-input
                    v-model="form.ownerTel"
                    placeholder="请输入车主联系方式"
                    clearable
                    style="width: 150px"
                ></el-input>
            </el-form-item>
			<el-form-item label="车辆状态" prop="state">
				<el-switch
					style="width: 150px;display: block;line-height: 20px"
					v-model="form.state"
					active-color="#0F47B8"
					inactive-color=""
					active-text="启用"
					inactive-text="禁用"
					active-value="0"
    				inactive-value="1">
				</el-switch>
			</el-form-item>
        </el-form>
        <div class="btn">
            <el-button type="primary" size="small" style="background-color: #043aa7;margin-top:60px" @click="addBox">保存</el-button>
            <el-button type="info" plain size="small" @click="cancel">取消</el-button>
        </div>
    </div>
</template>

<script>
    export default {
        name: "addBox",
        props: {
            item: {},
			title: {
				default: '',
			},
        },
        components: {},
        data() {
            return {
                form: {
					state:'0'
				},
                rules: {
                    carNo: [{ required: true, message: "请输入车牌号", trigger: "blur" }],
                    // owner: [{ required: true, message: "请输入车主", trigger: "blur" }],
                    // ownerTel: [{ required: true, message: "请输入车主联系方式", trigger: "blur" }]
                },
                dtpDnggcdList: [],
                cstOwnercdList: [],
                tmptunitList: [],
                type: ""
            };
        },

        methods: {
            changeCszCsizecd(e) {
                this.$set(this.form, "cszCsizecd", e[1]);
                this.$set(this.form, "ctypecd", e[0]);
            },
            //危险等级
            dangerCode() {
                this.$api.dangerCode().then((res) => {
                    this.dtpDnggcdList = res.data.data;
                });
            },
            addBox() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.$emit("addItem", this.form);
                    }
                });
            },
            cancel() {
                this.$emit("closeDialog");
            }
        },

        computed: {
            sizeType: {
                get() {
                    if (this.form.ctypecd) return this.form.ctypecd + "/" + this.form.cszCsizecd;
                },
                set(value) {}
            }
        },

        mounted() {
            this.type = this.$route.name == "unloadList" ? "I" : "E";
            this.dangerCode();
        }
    };
</script>
<style lang="less" scoped>
    .box-title {
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 20px;
        padding-left: 10px;
        border-left: 5px solid #4980d5;
        margin-bottom: 10px;
    }
    .btn {
        text-align: center;
        .el-button {
            width: 80px;
        }
    }
</style>
